<!--
 * @FileDescription: 主界面
 * @Author: zsf
 * @Date: 2021-03-27 11:18:17
 * @LastEditors: zsf
 * @LastEditTime: 2021-04-03 23:20:22
-->
<template>
  <div class="main-content">
    <div class="mask">
      <!-- 顶部 -->
      <div class="top">
        <div class="log">LOGO</div>
        <div class="title">网约修片平台</div>
      </div>

      <div class="middle">
        <div class="statistics">
          <div class="title2">实时数据</div>
          <div class="item">
            <div class="nums">2648</div>
            <div class="title3">代理商</div>
          </div>
          <div class="item line">
            <div class="nums">422</div>
            <div class="title3">商家数</div>
          </div>
          <div class="item line">
            <div class="nums">525</div>
            <div class="title3">修片师数</div>
          </div>
          <div class="item line">
            <div class="nums">3466</div>
            <div class="title3">已完成修片数</div>
          </div>
        </div>
      </div>

      <div class="qrcode-content">
        <div class="item">
          <div class="qrcode" @click="$router.push('AgentRegistration')">
            代理商注册
          </div>
          <div class="text">成为代理商，享受平台订单佣金分成</div>
          <div class="btn">
            <a-button class="my-ant-green-btn" type="primary">登录代理商后台</a-button>
          </div>
        </div>
        <div class="item">
          <div class="qrcode" @click="$router.push('AccountRegistration')">
            商家注册
          </div>
          <div class="text">提供优质修片师，自由合作，提高修片效率</div>
          <div class="btn">
            <a-button class="my-ant-green-btn" type="primary">下载商家客户端</a-button>
          </div>
        </div>
        <div class="item">
          <div class="qrcode" @click="$router.push('RetoucherRegis')">
            修片师注册
          </div>
          <div class="text">提供海量修片订单，赚取佣金，不上封顶</div>
          <div class="btn">
            <a-button class="my-ant-green-btn" type="primary">下载修片师客户端</a-button>
          </div>
        </div>
      </div>
      <div class="btn-title">平台后台管理登录</div>
      <div class="bottom-text">
        <div class="item">联系电话：137-1234-5678</div>
        <div class="item">深圳招财掌柜科技有限公司@copy right2019</div>
        <div class="item">粤 xxxxxxxxx</div>
      </div>
    </div>
  </div>
</template>

<script>
import imgSrc from 'assets/img/qrcode.png';
export default {
  data() {
    return {
      // key: value
      imgSrc: imgSrc,
    };
  },
};
</script>

<style lang="less" scoped>
.main-content {
  background-image: url('../../assets/img/background.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
  .mask {
    width: 100%;
    min-height: 100%;
    background: rgba(0, 0, 0, 0.7);
    .top {
      position: relative;
      height: 240px;
      .log {
        position: absolute;
        top: 61px;
        left: 100px;
        font-family: Microsoft YaHei;
        width: 110px;
        height: 50px;
        font-size: 38px;
        line-height: 50px;
        color: #ffffff;
      }
      .title {
        position: absolute;
        top: 76px;
        left: 0;
        right: 0;
        margin: 0 auto;
        width: 210px;
        height: 35px;
        font-size: 35px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        line-height: 60px;
        color: #ffffff;
      }
    }
    .middle {
      height: 310px;
      .statistics {
        width: 1200px;
        height: 174px;
        background: rgba(0, 0, 0, 0.61);
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
        position: relative;
        .title2 {
          position: absolute;
          top: 0;
          left: 0;
          width: 87px;
          height: 33px;
          background: url('../../assets/img/m_01.png');
          background-repeat: no-repeat;
          background-size: 100% 100%;
          line-height: 33px;
          text-align: center;
          font-size: 14px;
          font-family: Microsoft YaHei;
          color: #ffffff;
        }
        .item {
          flex: auto;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;
          .nums {
            font-size: 45px;
          }
          .title3 {
            font-size: 18px;
          }
        }
        .line {
          position: relative;
          &::before {
            content: '';
            position: absolute;
            height: 37px;
            width: 1px;
            top: 0;
            bottom: 0;
            left: 0;
            margin: auto auto;
            background: #707070;
          }
        }
      }
    }

    .qrcode-content {
      display: flex;
      justify-content: space-around;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        .qrcode {
          width: 165px;
          height: 165px;
          background: rgba(150, 209, 220, 0.42);
          box-shadow: 0px 31px 67px rgba(0, 0, 0, 0.04);
          border-radius: 7px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .text {
          width: 160px;
          height: 57px;
          font-size: 14px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          line-height: 24px;
          color: #c0bfbf;
          text-align: center;
        }
      }
    }

    .btn-title {
      text-align: center;
      font-size: 18px;
      font-family: Source Han Sans CN;
      font-weight: bold;
      line-height: 28px;
      color: #53A58A;
      padding: 15px 0;
    }

    .bottom-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 20px;
      .item {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 16px;
        color: #FFFFFF;
        padding-bottom: 5px;
      }
    }
  }
}
</style>